Showing posts with label ASP.NET MVC. Show all posts
Showing posts with label ASP.NET MVC. Show all posts

Thursday, 15 February 2018

AJS - Displaying Images

AngularJS

 Introduction To Angular JS:
  • Angular Js is a Structural framework for developing dynamic Web Applications.
  • It is a open source framework powered by Google.
  • Angular JS is not a replacement of JavaScript. Infact it is developed using Javascript.
  • It makes Client Side Programming easy.
  • Angular JS Framework implements MVC Pattern (Model/View/Controller).

Angular JS Features:
  1. Structural Programing (MVC structure)
  2. Parallel Development
  3. Data Binding
  4. HTML as Template
  5. Highly Testable
  6. Routing Support for SPA
  7. Powered by Google
Task : Dynamic Display of Images

Output:

*.html

<html>
<head>
<style>
img{height:120;width:100;border:1px solid yellow;border-radius:25px}
.imgdisplaydivclass{width:280px;float:left;padding:10px;margin-left:60px;margin-bottom:20px;border:1px double black;border-radius:25px}
span{text-align:left}
</style>
</head>
<body bgcolor="#f0f0f0" ng-app="iplApp" >
<div style="background-color:DodgerBlue">
<p style="font-family:verdana;font-size:20;font-weight:bold;text-align:center;padding:5px 5px 5px 0px;"><img src="Images/coverpage.jpg" />&nbsp;VIVO IPL 2018 Different Franchisee Team Captains &nbsp;&nbsp;&nbsp;<img src="Images/crickt.jpg"/>&nbsp;<img src="Images/Angular.png"/>&nbsp;&nbsp;Mr. Narasimha Rao&nbsp;&nbsp;&nbsp;<img src="Images/NRSir.jpg" />&nbsp;&nbsp;Captain of Our Ship
     </p>
</div>
<div ng-controller="IPLController">
<div class="imgdisplaydivclass" ng-repeat ="item in iPLTeams track by $index">
<img ng-src="Images/{{item.image}}"/><br><br>
<span><b>Name : </b> {{item.captain | uppercase}}</span><br>
<span><b>Team : </b>{{item.team}}</span><br>
<span><b>Auction Price : </b> <mark>{{item.auctionPrice | currency:"&#8377"}} cr</mark></span><br>
<span><b>Coach : </b>{{item.coach}}</span>
<br>
</div>
</div>
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module("iplApp",[]);
app.controller("IPLController",function($scope)
{
$scope.iPLTeams = [{team:"Chennai Super Kings",captain : "MS Dhoni", auctionPrice: 15 , coach : "Stephen Fleming",image:"Dhoni.jpg"},
{team:"Delhi Daredevils",captain : "Gautham Gambhir", auctionPrice: 2.8 , coach : "Rickey Pointing",image:"Gambhir.jpg"},
{team:"Mumbai Indians",captain : "Rohit Sharma", auctionPrice: 15, coach : "Mahila Jayawardane",image:"Rohit.jpg"},
{team:"Kings XI Punjab",captain : "Yuvraj Singh", auctionPrice: 2 , coach : "Brad Hodge",image:"Yuvraj.jpg"},
{team:"Kolkata Knight Riders",captain : "Robin Uttappa", auctionPrice: 6.4 , coach : "Jacques Kallis",image:"Uttappa.jpg"},
{team:"Rajasthan Royals",captain : "Steve Smith", auctionPrice: 12.5, coach : "Paddy Upton",image:"Smith.jpg"},
{team:"Royal Chanllengers Bangalore",captain : "Virat Kohli", auctionPrice: 17 , coach : "Daniel Vettori",image:"Virat.jpg"},
{team:"Sunrisers Hyderabad",captain : "David Warner", auctionPrice: 12.5, coach : "Tom Moody",image:"warner.jpg"}];
});
</script>
</body>
</html>
Posted by Learner 3 comments
Labels: ,

Tuesday, 2 June 2015

MVCCRUD


Create ASP.NET MVC application to process employee details using Entity Framework (DataBase First Approach)
1. Create ASP.NET MVC application and select Basic Template


2.  Add Employee controller
  • Right-click on Controllers folder
  • Add
  • Controller
  • Rename controller as Employee
  • Click Add button

      3. Add Entity Data Model to the project

  • Right click on Models folder
  • Add
  • ADO.NET Entity Data Model
  • Rename  as Employee  (File name-Employee.edmx)
  • Click OK

 

Follow the steps in the Entity Data Model Wizard
  • Select "Generate from DataBase"
  • Click Next

Provide Connection information
  • Click "New Connection" button
  • Provide details click OK

  • Check your Web.config for the connection string
<connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MvcCRUD-20150602203258;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-MvcCRUD-20150602203258.mdf" />
    <add name="TestdbEntities" connectionString="metadata=res://*/Models.Employee.csdl|res://*/Models.Employee.ssdl|res://*/Models.Employee.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=SAS;initial catalog=Testdb;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
  • Click Next
  • Select the required tables (In this example using Employee Table)
  • Click Finish
  • Build the project

4. Prepare the action methods in EmployeeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcCRUD.Models;
using System.Data;

namespace MvcCRUD.Controllers
{
    public class EmployeeController : Controller
    {
        TestdbEntities db = new TestdbEntities();

        // Code for Get/List
        public ActionResult Index()
        {
            List<Employee> employeelist = db.Employees.ToList();
            return View(employeelist);
        }
        // code for Get/Create
        public ActionResult Create()
        {
            return View();
        }

        // code for Post/Create
        [HttpPost]
        public ActionResult Create(Employee employee)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Employees.Add(employee);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
                return View(employee);
            }
            catch
            {
                return View();
            }
        }
        // code for Get/Edit
        public ActionResult Edit(int id)
        {
            Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);
            return View(employee);
        }
        // code for Post/Edit
        [HttpPost]
        public ActionResult Edit(Employee employee)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Entry(employee).State = EntityState.Modified;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
                return View(employee);
            }
            catch
            {
                return View();
            }
        }
        // code for Get/Details

        public ActionResult Details(int id)
        {
            Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);

            return View(employee);
        }
        // code for Get/Delete
        public ActionResult Delete(int id)
        {
            Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);
            return View(employee);
        }
        // code for Post/Delete
        [HttpPost]
        public ActionResult Delete(Employee employee)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Entry(employee).State = EntityState.Deleted;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
                return View(employee);
            }
            catch
            {
                return View();
            }
        }
    }
}

5. Add views for above action methods by using Scaffold templates to generate the views and 
Modify the content according to the requirement.

6. Go to solution Explorer

 App_Start-->RouteConfig.cs

Change the ControllerName to Employee and action to Index  and Build the application.



Index.cshtml

@model IEnumerable<MvcCRUD.Models.Employee>

<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.HireDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ContactNo)
        </th>
        <th>Actions</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.HireDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Salary)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ContactNo)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
</table>

Create.cshtml

@model MvcCRUD.Models.Employee

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Employee</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Gender)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Gender", new List<SelectListItem>
            {
              new SelectListItem { Text ="Male",Value="Male"},
              new SelectListItem { Text = "Female",Value="Female"}
            },"--------Select Gender--------")
            @Html.ValidationMessageFor(model => model.Gender)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.HireDate)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.HireDate, "{0:MM/dd/yyyy}", new { @class="datepicker" })
            @Html.ValidationMessageFor(model => model.HireDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Salary)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Salary)
            @Html.ValidationMessageFor(model => model.Salary)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNo)
            @Html.ValidationMessageFor(model => model.ContactNo)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>






Edit.cshtml

@model MvcCRUD.Models.Employee

<h2>Edit</h2>
<hr />
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Employee</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Id)
        </div>
        <div class="editor-field">
           @Html.TextBoxFor(m=>m.Id,new  { disabled = "disabled", @readonly = "readonly" })
            @Html.ValidationMessageFor(model => model.Id)
        </div>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Gender)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Gender)
            @Html.ValidationMessageFor(model => model.Gender)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.HireDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.HireDate)
            @Html.ValidationMessageFor(model => model.HireDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Salary)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Salary)
            @Html.ValidationMessageFor(model => model.Salary)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNo)
            @Html.ValidationMessageFor(model => model.ContactNo)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>



Details.cshtml

@model MvcCRUD.Models.Employee

<h2>Details</h2>
<hr />>
<fieldset>
    <legend>Employee</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Gender)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Gender)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Age)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Age)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.HireDate)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.HireDate)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Salary)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Salary)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.ContactNo)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.ContactNo)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.Id }) |
    @Html.ActionLink("Back to List", "Index")
</p>



Delete.cshtml

@model MvcCRUD.Models.Employee

<h2>Delete</h2>
<hr />
<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Employee</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Gender)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Gender)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Age)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Age)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.HireDate)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.HireDate)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Salary)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Salary)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.ContactNo)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.ContactNo)
    </div>
</fieldset>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" /> |
        @Html.ActionLink("Back to List", "Index")
    </p>
}


Employee.cs

namespace MvcCRUD.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    
    public partial class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public Nullable<int> Age { get; set; }
        [DisplayFormat(DataFormatString = "{0:d-M-yyy}", ApplyFormatInEditMode = true)]
        public Nullable<System.DateTime> HireDate { get; set; }
        public Nullable<decimal> Salary { get; set; }
        public Nullable<long> ContactNo { get; set; }
    }
}

                                                     MyScripts.js

    $(document).ready(function () {
   
        $("table tr:even").css("background-color","lightgray");
        $("table tr:odd").css("background-color", "ash");
        $('.datepicker').datepicker();
    });

Add these Scripts in Layout.cshtml

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="~/Scripts/MyJScript.js"></script>


Posted by Unknown 2 comments
Labels:

Thursday, 21 May 2015

ASP.NET 5/ MVC 6




MVC6 is part of ASP.NET 5, which is the next version of ASP.Net     (ASP.NET vNext).


1. ASP.NET 5 applications can run on Windows, OSX, and Linux.

2.  Asp.Net  Web forms is not a part of ASP.NET 5. We can continue to build Web Forms apps in Visual Studio 2015 by targeting the .NET 4.6 framework. However, Web Forms apps cannot  take advantage of any of the new features of ASP.NET5

3. ASP.NET 5 only supports C#  and there is no Visual Basic .

4. We have Tag Helpers instead of HTML Helpers in MCV6.

5. Instead of  Html.Action() helper, MVC6 Includes an alternative technology called View Components.

6. In MVC 6, WEB API is merged with MVC. This means we will now have one set of controller class, one set of attributes, model binders etc Microsoft.Asp.Net.Mvc.Controller is the base class.

   MVC 6 = ASP.NET MVC + WEB API

7.  Built -in support for Dependency Injection.

8. VS 2015 includes templates for creating AngularJS modules, controllers, directives, and factories. We can interact with an MVC 6 controller from an AngularJS $resource using REST.


Posted by Unknown 0 comments
Labels:

Friday, 15 May 2015

INTRODUCTION TO ASP.NET MVC


MVC

 1. MVC stands for Model View Controller.
2. MVC is a design pattern which are used to develop the applications.

 Design Pattern

 1. Design pattern is a pre-defined solution for the problems that occurs in software development.
2. These design pattern can be used in any application development based on the requirement.

 Some of the important categories of Design Pattern

 1. Architectural Design Pattern
2. Behavioural Design Pattern
3. Conceptual Design Pattern
4. Structural Design Pattern

MVC Design Pattern comes under Architectural Design Pattern.

WHY MVC?

1. MVC Design Pattern provides the solution for the applications that are using GUI programming.
2. In MVC, there is a separation of code. UI logic is separated from the business/database logic.
3. Due to this we can reduce the dependency or complexities of GUI logic on other parts of the           application.
4. Easy to perform modifications since application is divided into different modules.

Note: MVC Design Pattern is suitable if the application requires more GUI modifications frequently.

MODULES IN MVC
1. MODEL
  • It is responsible for database related logic.
  • Model will communicate with database and sends the result to controller.
2. VIEW
  • It is responsible for GUI related logic.
  • It will focus how the data will present to the end user.
3.CONTROLLER
  • Controller is responsible for complete execution flow of the application.
  • It will communicate with models and also with views

ASP.NET MVC

  • ASP.NET MVC is an open source framework.
  • Microsoft was introduced MVC Design Pattern with ASP.NET in 2007.
  • Using ASP.NET MVC, we can develop Web Applcations with MVC Design pattern.

Posted by Unknown 3 comments
Labels:
Subscribe to: Posts (Atom)